<template>
  <div class="container">
    <!--    头部搜索区域-->
    <div class="search-header">
      <div class="hd-left">
        <el-form inline :model="searchForm" ref="searchRef">
          <el-form-item label="时间区间" prop="time">
            <el-date-picker
              size="small"
              style="width: 300px"
              v-model="searchForm.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <TsButton
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="search"
              perms="comment:page:get"
              label="搜索"
            ></TsButton>
            <el-button icon="el-icon-refresh" size="small" @click="reset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="hd-right c-m-t-5">
        <TsButton
          label="删除"
          perms="comment:delete"
          type="danger"
          size="small"
          @click="delMultiple"
          >删除</TsButton
        >
      </div>
    </div>
    <!--    表格区域-->
    <div class="table" style="height: calc(100% - 160px); overflow-y: auto">
      <el-table
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{ background: '#FEF6F6', textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="account" label="发布账号" />
        <el-table-column prop="name" label="昵称" />
        <el-table-column prop="foodName" label="菜品名称" />
        <el-table-column prop="canteenName" label="食堂" />
        <el-table-column prop="content" label="评价内容" />
        <el-table-column prop="createTime" label="发布时间" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              icon="el-icon-warning-outline"
              type="text"
              @click="detail(scope.row.id)"
              size="small"
              >详情</el-button
            >
            <TsButton
              label="删除"
              perms="comment:$id:delete"
              icon="el-icon-delete"
              type="text"
              style="color: #ff5d5d"
              @click="del(scope.row.id)"
              size="small"
              >删除</TsButton
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--      分页区域-->
    <el-pagination
      style="float: right; margin: 20px"
      @size-change="pageSizeChange"
      @current-change="pageCurrentChange"
      :current-page="pageNumber"
      :page-size="pageSize"
      layout=" prev, pager, next"
      :total="totalNum"
      background
    >
    </el-pagination>
    <!--    详情对话框-->
    <el-dialog v-model="detailDialogVisible" title="详情" width="30%">
      <div class="detail-content">
        <el-form :model="detailForm" ref="detailRef">
          <el-form-item label="发布账号" prop="account">
            {{ detailForm.account }}
          </el-form-item>
          <el-form-item label="昵称" prop="name">
            {{ detailForm.name }}
          </el-form-item>
          <el-form-item label="食堂" prop="canteenName">
            {{ detailForm.canteenName }}
          </el-form-item>
          <el-form-item label="发布时间" prop="createTime">
            {{ detailForm.createTime }}
          </el-form-item>
          <el-form-item label="评论内容" prop="content">
            {{ detailForm.content }}
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="footer-btns">
          <el-button type="primary" size="small" @click="next"
            >下一个</el-button
          >
          <el-button type="danger" size="small" @click="del(detailForm.id)"
            >删除</el-button
          >
          <el-button size="small" @click="cancel">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import qs from "qs";
import {
  commentNext,
  delComment,
  delMultipleComment,
  getCommentDetail,
  getCommentList,
} from "../../api/canteen/commentApi";
import commonPageRepository from "../../composables/common-page-repository";
import { ElMessage, ElMessageBox } from "element-plus";
import TsButton from "../../components/TsButton";

export default {
  name: "CommentManger",
  components: { TsButton },
  setup() {
    //查询数据
    const pageNumber = ref(1);
    const pageSize = ref(50);
    const totalNum = ref("");
    //表格数据
    const tableData = ref([]);
    //获取评论表格数据
    function getCommentData() {
      getCommentList({
        pageNum: pageNumber.value,
        pageSize: pageSize.value,
      }).then((res) => {
        tableData.value = res.data.content;
        totalNum.value = res.data.totalElements;
      });
    }
    //搜索表单
    const searchForm = reactive({});
    //表单标识
    const searchRef = ref(null);
    //搜索方法
    function search() {
      pageNumber.value = 1;
      getCommentList({
        pageSize: pageSize.value,
        pageNum: pageNumber.value,
        startTime: searchForm.time[0],
        endTime: searchForm.time[1],
      }).then((res) => {
        tableData.value = res.data.content;
        totalNum.value = res.data.totalElements;
      });
    }
    //重置
    function reset() {
      searchRef.value.resetFields();
      getCommentData();
    }
    //详情对话框显示与隐藏
    const detailDialogVisible = ref(false);
    const detailRef = ref(null);
    //详情表单数据
    const detailForm = ref([]);
    //详情方法
    //评论Id
    const commentId = ref("");
    function detail(id) {
      commentId.value = id;
      detailDialogVisible.value = true;
      //  获取评论详情信息
      getCommentDetail(id).then((res) => {
        detailForm.value = res.data;
      });
    }
    //取消
    function cancel() {
      detailRef.value.resetFields();
      detailDialogVisible.value = false;
    }
    //下一条
    function next() {
      commentNext(commentId.value).then((res) => {
        if (res.data === null) {
          ElMessage.warning("没有下一条了！");
          return;
        } else {
          commentId.value = res.data.id;
          detailForm.value = res.data;
        }
      });
    }
    //单条删除
    function del(id) {
      ElMessageBox.confirm(" 您确定要删除这条数据吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delComment(id).then(() => {
            ElMessage.success("删除成功");
            detailDialogVisible.value = false;
            getCommentData();
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消操作",
          });
        });
    }
    //多选数组
    const multipleTable = ref([]);
    //多选操作
    function handleSelectionChange(val) {
      multipleTable.value = val;
    }
    //多选删除
    function delMultiple() {
      if (multipleTable.value.length === undefined) {
        ElMessage.warning("请先选择要删除的数据");
      } else {
        ElMessageBox.confirm("您确定要删除这些数据么？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          const ids = [];
          multipleTable.value.map((item) => {
            ids.push(item.id);
          });
          const qsIds = qs.stringify({ ids: ids }, { indices: false });
          delMultipleComment(qsIds)
            .then(() => {
              ElMessage.success("删除成功");
              getCommentData();
            })
            .catch(() => {
              ElMessage.info("取消操作");
            });
        });
      }
    }
    onMounted(() => {
      getCommentData();
    });
    const { pageSizeChange, pageCurrentChange } = commonPageRepository(
      pageSize,
      pageNumber,
      getCommentData
    );
    return {
      tableData,
      pageSize,
      pageNumber,
      totalNum,
      pageSizeChange,
      pageCurrentChange,
      searchForm,
      searchRef,
      search,
      detailDialogVisible,
      detailForm,
      detail,
      reset,
      detailRef,
      cancel,
      next,
      del,
      multipleTable,
      handleSelectionChange,
      delMultiple,
    };
  },
};
</script>

<style scoped lang="scss">
/deep/.el-dialog__footer {
  text-align: left;
}
.container {
  height: calc(100vh - 200px);
  margin: 20px 0;
  padding: 10px;
  border-radius: 6px;
  opacity: 1;
  overflow-y: auto;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  background: #ffffff;
  .search-header {
    display: flex;
    justify-content: space-between;
  }
}
</style>
